<template>
    <div id="hiddenDanger">
        <div class="timeSelect">
            <span>从:</span>
             <el-date-picker
                v-model="startTime"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
            <span>到:</span>
             <el-date-picker
                v-model="endTime"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
            <el-select v-model="status" placeholder="请选择">
                <el-option
                v-for="item in orders"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" >搜索</el-button>
            <el-button type="primary" icon="el-icon-plus">新增</el-button>
        </div>
        <div class="table">
            <table>
                <thead>
                    <tr>
                        <th><span>序号</span></th>
                        <th><span>检修单号</span></th>
                        <th><span>上报时间</span></th>
                        <th><span>紧急程度</span></th>
                        <th><span>来源</span></th>
                        <th><span>描述</span></th>
                        <th><span>详情</span></th>
                        <th><span>状态</span></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in tableList" :key="index">
                        <td><span>{{index+1}}</span></td>
                        <td><span>{{item.number}}</span></td>
                        <td><span>{{item.time}}</span></td>
                        <td><span>{{item.level}}</span></td>
                        <td><span>{{item.from}}</span></td>
                        <td><span>{{item.desc}}</span></td>
                        <td><span>详情</span></td>
                        <td><span>{{item.status?"已派送":"未派送"}}</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="pagination">
            <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      startTime: "",
      endTime: "",
      tableList:[
          {
              number:"NXST-00101",
              time:"2017-10-21 10：30",
              level:"紧急",
              from:"隐患上报",
              desc:"武汉下大雨了",
              status: true
          },
           {
              number:"NXST-00101",
              time:"2017-10-21 10：30",
              level:"紧急",
              from:"隐患上报",
              desc:"武汉下大雨了",
              status: true
          },
           {
              number:"NXST-00101",
              time:"2017-10-21 10：30",
              level:"紧急",
              from:"隐患上报",
              desc:"武汉下大雨了",
              status: false
          },
           {
              number:"NXST-00101",
              time:"2017-10-21 10：30",
              level:"紧急",
              from:"隐患上报",
              desc:"武汉下大雨了",
              status: true
          },
           {
              number:"NXST-00101",
              time:"2017-10-21 10：30",
              level:"紧急",
              from:"隐患上报",
              desc:"武汉下大雨了",
              status: true
          }
      ],
      orders:[  //派单状态
          {
              label:"未派单",
              value:"1"
          },
          {
              label:"已派单",
              value:"2"
          }
      ],
      status:""  //选择的派单
    };
  }
};
</script>

<style lang="scss" scoped>
#hiddenDanger {
  width: 100%;
  height: 100%;
  padding: 10px;
  .timeSelect {
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    .el-date-editor--date{
        margin-right: 10px;
    }
    span{
        display: inline-block;
        margin-right: 10px;
    }
  }
  .table {
    width: 100%;
    height: calc(100% - 100px);
    overflow-y: auto;
    table {
      width: 100%;
      border-spacing: 0;
      text-align: center;
      border: 1px solid #ccc;
      border-bottom: none;
      tr {
        td {
          height: 30px;
          line-height: 30px;
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          &:last-child {
            border-right: none;
          }
        }
        th {
          height: 30px;
          line-height: 30px;
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          &:last-child {
            border-right: none;
          }
        }
      }
    }
  }
  .pagination{
      width: 100%;
      display: flex;
      justify-content: center;
  }
}
</style>